<template>
  <div class="home">
    <Header></Header>
    <ly-tabs class="tabs" v-model="value" @change="changeTab">
      <ly-tab-item
        :style="{ color: value == tab.name ? '#b0353f' : '' }"
        v-for="tab in tabList"
        :name="tab.name"
        :title="tab.title"
        :key="tab.name"
      />
    </ly-tabs>
    <section>
      <div v-for="item in dataInfo" :key="item.id">
        <Ad v-if="item.type == 'ad'" :ad="item.data"></Ad>
        <Swiper
          v-if="item.type == 'swiperList'"
          :swiperList="item.data"
        ></Swiper>
        <Icons v-if="item.type == 'iconList'" :iconList="item.data"></Icons>
        <Recommend
          v-if="item.type == 'recommendList'"
          :recommendList="item.data"
        ></Recommend>
        <Like v-if="item.type == 'likeList'" :likeList="item.data"></Like>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/views/home/components/Header.vue";
import Swiper from "@/views/home/components/Swiper.vue";
import Icons from "@/views/home/components/Icons.vue";
import Recommend from "@/views/home/components/Recommend.vue";
import Like from "@/views/home/components/Like.vue";
import Ad from "@/views/home/components/Ad.vue";
// import BetterScroll from "better-scroll";

export default {
  name: "Home",
  data() {
    return {
      value: 1,
      tabList: [],
      dataInfo: [],
    };
  },
  created() {
    this.getData(1);
  },
  mounted() {
    // new BetterScroll(".wrapper", {
    //   movable: true,
    //   zoom: true,
    // });
  },
  methods: {
    changeTab(index) {
      // console.log(index);
      this.getData(index);
    },
    async getData(index) {
      // let res = await axios({
      //   url: `/api/indexList/${index}/data/1`,
      // });
      let res = await this.$http.getIndexList(index);
      // console.log(res);
      if (res.code == 200) {
        this.tabList = res.data.lyTabs;
        this.dataInfo = res.data.data;
      }
    },
  },
  components: {
    Header,
    Swiper,
    Icons,
    Recommend,
    Like,
    Ad,
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 1.6rem;
}
.tabs {
  position: sticky;
  top: 1.3333rem;
  left: 0;
  border-bottom: none;
  z-index: 999;

  ::v-deep .ly-tabs__active-line {
    background-color: #b0353f !important;
  }
}
</style>
